<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>【源码阅读】Vue-release 尤雨溪发布 Vue.js 的流程以及自动化发布功能的实现 | Vixcity</title><meta name="keywords" content="源码,Vue,Vue-release"><meta name="author" content="Vixcity"><meta name="copyright" content="Vixcity"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="首先了解下vuejs的发布流程  环境准备你需要确保 Node.js 版本是 10+, 而且 yarn 的版本是 1.x Yarn 1.x。 如果你安装的 Node.js 版本是低于 10的话，推荐用 nvm 这个Node版本管理工具 vue-next &#x3D;&#x3D;&gt; package.json12345678910111213141516&#x2F;&#x2F; vue-next&#x2F;package.json&amp;#123;">
<meta property="og:type" content="article">
<meta property="og:title" content="【源码阅读】Vue-release 尤雨溪发布 Vue.js 的流程以及自动化发布功能的实现">
<meta property="og:url" content="http://vixcity.gitee.io/my-gitee-blog/2021/10/22/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91Vue-release%20%E5%B0%A4%E9%9B%A8%E6%BA%AA%E5%8F%91%E5%B8%83%20Vue.js%20%E7%9A%84%E6%B5%81%E7%A8%8B%E4%BB%A5%E5%8F%8A%E8%87%AA%E5%8A%A8%E5%8C%96%E5%8F%91%E5%B8%83%E5%8A%9F%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0/index.html">
<meta property="og:site_name" content="Vixcity">
<meta property="og:description" content="首先了解下vuejs的发布流程  环境准备你需要确保 Node.js 版本是 10+, 而且 yarn 的版本是 1.x Yarn 1.x。 如果你安装的 Node.js 版本是低于 10的话，推荐用 nvm 这个Node版本管理工具 vue-next &#x3D;&#x3D;&gt; package.json12345678910111213141516&#x2F;&#x2F; vue-next&#x2F;package.json&amp;#123;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://vixcity.gitee.io/my-gitee-blog/img/vue%E7%9B%B8%E5%85%B3.jpg">
<meta property="article:published_time" content="2021-10-21T16:00:00.000Z">
<meta property="article:modified_time" content="2022-01-04T03:04:47.339Z">
<meta property="article:author" content="Vixcity">
<meta property="article:tag" content="源码">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue-release">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://vixcity.gitee.io/my-gitee-blog/img/vue%E7%9B%B8%E5%85%B3.jpg"><link rel="shortcut icon" href="/my-gitee-blog/img/favicon.ico"><link rel="canonical" href="http://vixcity.gitee.io/my-gitee-blog/2021/10/22/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91Vue-release%20%E5%B0%A4%E9%9B%A8%E6%BA%AA%E5%8F%91%E5%B8%83%20Vue.js%20%E7%9A%84%E6%B5%81%E7%A8%8B%E4%BB%A5%E5%8F%8A%E8%87%AA%E5%8A%A8%E5%8C%96%E5%8F%91%E5%B8%83%E5%8A%9F%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/my-gitee-blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/my-gitee-blog/',
  algolia: undefined,
  localSearch: {"path":"/my-gitee-blog/search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":1,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: '/my-gitee-blog/',
      css: '/my-gitee-blog/'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '【源码阅读】Vue-release 尤雨溪发布 Vue.js 的流程以及自动化发布功能的实现',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2022-01-04 11:04:47'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/my-gitee-blog/css/mycss.css"><link rel="stylesheet" href="/my-gitee-blog/css/newStyle.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.css"><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/hexo-electric-clock@1.0.6/clock.css"><link rel="stylesheet" href="https://unpkg.zhimg.com/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/my-gitee-blog/img/avatar.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/my-gitee-blog/archives/"><div class="headline">文章</div><div class="length-num">55</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/my-gitee-blog/tags/"><div class="headline">标签</div><div class="length-num">50</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/my-gitee-blog/categories/"><div class="headline">分类</div><div class="length-num">18</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/my-gitee-blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/PicBed"><i class="fa-fw fas fa-image"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/my-gitee-blog/img/vue%E7%9B%B8%E5%85%B3.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/my-gitee-blog/">Vixcity</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/my-gitee-blog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/PicBed"><i class="fa-fw fas fa-image"></i><span> 图库</span></a></div><div class="menus_item"><a class="site-page" href="/my-gitee-blog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">【源码阅读】Vue-release 尤雨溪发布 Vue.js 的流程以及自动化发布功能的实现</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-10-21T16:00:00.000Z" title="发表于 2021-10-22 00:00:00">2021-10-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-01-04T03:04:47.339Z" title="更新于 2022-01-04 11:04:47">2022-01-04</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/my-gitee-blog/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/">大前端</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/my-gitee-blog/categories/%E5%A4%A7%E5%89%8D%E7%AB%AF/%E6%BA%90%E7%A0%81/">源码</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.1k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>22分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="【源码阅读】Vue-release 尤雨溪发布 Vue.js 的流程以及自动化发布功能的实现"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p> 首先了解下<code>vuejs</code>的发布流程</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311424559.png" alt="vuejs的发布流程"></p>
<h2 id="环境准备"><a href="#环境准备" class="headerlink" title="环境准备"></a>环境准备</h2><p>你需要确保 Node.js 版本是 <code>10+</code>, 而且 <code>yarn</code> 的版本是 <code>1.x</code> Yarn 1.x。</p>
<p>如果你安装的 <code>Node.js</code> 版本是低于 <code>10</code>的话，推荐用 nvm 这个<code>Node版本管理工具</code></p>
<h3 id="vue-next-gt-package-json"><a href="#vue-next-gt-package-json" class="headerlink" title="vue-next ==&gt; package.json"></a>vue-next ==&gt; package.json</h3><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue-next/package.json</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;private&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;3.2.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;workspaces&quot;</span>: [</span><br><span class="line">        <span class="string">&quot;packages/*&quot;</span></span><br><span class="line">    ],</span><br><span class="line">    <span class="attr">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">        <span class="comment">// --dry 参数是自己加的，如果是调试 代码也建议加</span></span><br><span class="line">        <span class="comment">// 这句话的意思是</span></span><br><span class="line">  <span class="comment">// 不执行测试和编译 、不执行 推送git等操作</span></span><br><span class="line">        <span class="comment">// 也就是说空跑，只是打印</span></span><br><span class="line">        <span class="attr">&quot;release&quot;</span>: <span class="string">&quot;node scripts/release.js --dry&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;preinstall&quot;</span>: <span class="string">&quot;node ./scripts/checkYarn.js&quot;</span>,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="调试-vue-next-gt-scripts-gt-release-js-文件"><a href="#调试-vue-next-gt-scripts-gt-release-js-文件" class="headerlink" title="调试 vue-next ==&gt; scripts ==&gt; release.js 文件"></a>调试 vue-next ==&gt; scripts ==&gt; release.js 文件</h3><p>打开 VScode ，其版本最好是大于<code>1.50.0</code></p>
<p>找到 <code>vue-next ==&gt; package.json</code> 文件打开</p>
<p>然后在 <code>scripts</code> 上方，会有调试按钮</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311441685.jpg" alt="点击"></p>
<p>点击后，选择 <code>release</code>。即可进入调试模式</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311442086.jpg" alt="点击release"></p>
<p>此时我点击了之后，发生了这样一件恐怖的事情</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311454692.png" alt="调试失败了"></p>
<p><font color=#FF0000 size=7 face="黑体">竟然调试失败了！！！</font></p>
<p>那是什么原因造成的呢</p>
<p>既然是调试过程中出的问题，那我们打开 VScode 找到调试去里面看看</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311459643.jpg" alt="运行与调试"></p>
<p>这时候我们发现，他说我们要自定义调试，要打开文件夹，在一看，我们发现，我现在打开的是一个文件，所以它找不到文件夹当中的东西，于是现在就报错了</p>
<p>那我们现在打通过VScode打开文件夹重新来一遍</p>
<p>这时候我们点击调试，点击一下 release，发现</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311503677.jpg" alt="好使"></p>
<p>诶~</p>
<p>一下子好使了</p>
<p>学会调试后，我们先大致走一遍流程，在关键地方多打上几个断点多走几遍，就能猜测到源码意图了。</p>
<p><font color=#00FFFF size=7 face="黑体">本篇文章到此结束，完结撒花~~</font></p>
<p>别走别走，哈哈，我开玩笑的</p>
<p>刚刚那个调试的问题解决，接下来我们就开始愉快的调试环节🤪</p>
<h2 id="1-文件开头的一些依赖引入和函数声明"><a href="#1-文件开头的一些依赖引入和函数声明" class="headerlink" title="1. 文件开头的一些依赖引入和函数声明"></a>1. 文件开头的一些依赖引入和函数声明</h2><h3 id="1-1-第一部分"><a href="#1-1-第一部分" class="headerlink" title="1.1 第一部分"></a>1.1 第一部分</h3><p>让我们跟着断点来，先看文件开头的一些依赖引入和函数声明</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue-next/scripts/release.js</span></span><br><span class="line"><span class="keyword">const</span> args = <span class="built_in">require</span>(<span class="string">&#x27;minimist&#x27;</span>)(process.argv.slice(<span class="number">2</span>))</span><br><span class="line"><span class="comment">// 文件模块</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>)</span><br><span class="line"><span class="comment">// 路径</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="comment">// 控制台</span></span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">&#x27;chalk&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> semver = <span class="built_in">require</span>(<span class="string">&#x27;semver&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> currentVersion = <span class="built_in">require</span>(<span class="string">&#x27;../package.json&#x27;</span>).version</span><br><span class="line"><span class="keyword">const</span> &#123; prompt &#125; = <span class="built_in">require</span>(<span class="string">&#x27;enquirer&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行子进程命令   简单说 就是在终端命令行执行 命令</span></span><br><span class="line"><span class="keyword">const</span> execa = <span class="built_in">require</span>(<span class="string">&#x27;execa&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h4 id="1-1-1-minimist-命令行参数解析"><a href="#1-1-1-minimist-命令行参数解析" class="headerlink" title="1.1.1 minimist 命令行参数解析"></a>1.1.1 minimist 命令行参数解析</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一句话</span></span><br><span class="line"><span class="keyword">const</span> args = <span class="built_in">require</span>(<span class="string">&#x27;minimist&#x27;</span>)(process.argv.slice(<span class="number">2</span>))</span><br><span class="line"><span class="comment">//其中`process.argv`的第一元素是`Node`可执行文件和第二个元素是被执行JavaScript文件的完全限定的文件系统路径，无论你是否这样输入他们，他们都会被获取。</span></span><br></pre></td></tr></table></figure>

<p>其中，这个 minimist 这个库，就是解析命令行参数的</p>
<p>我们来看下川神的例子</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">$ node example/parse.js -a beep -b boop</span><br><span class="line"><span class="comment">// 这个被minimist解析出来是这样子的</span></span><br><span class="line">&#123; <span class="attr">_</span>: [], <span class="attr">a</span>: <span class="string">&#x27;beep&#x27;</span>, <span class="attr">b</span>: <span class="string">&#x27;boop&#x27;</span> &#125;</span><br><span class="line"></span><br><span class="line">$ node example/parse.js -x <span class="number">3</span> -y <span class="number">4</span> -n5 -abc --beep=boop foo bar baz</span><br><span class="line"><span class="comment">// 这个被minimist解析出来是这样子的</span></span><br><span class="line"><span class="comment">// &#x27;_&#x27; 这个属性所对应的数组值，是包含所有没有关联选项的参数</span></span><br><span class="line">&#123; <span class="attr">_</span>: [ <span class="string">&#x27;foo&#x27;</span>, <span class="string">&#x27;bar&#x27;</span>, <span class="string">&#x27;baz&#x27;</span> ],</span><br><span class="line">  <span class="attr">x</span>: <span class="number">3</span>,</span><br><span class="line">  <span class="attr">y</span>: <span class="number">4</span>,</span><br><span class="line">  <span class="attr">n</span>: <span class="number">5</span>,</span><br><span class="line">  <span class="attr">a</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">beep</span>: <span class="string">&#x27;boop&#x27;</span> &#125;</span><br></pre></td></tr></table></figure>

<h4 id="1-1-2-chalk-终端多色彩输出"><a href="#1-1-2-chalk-终端多色彩输出" class="headerlink" title="1.1.2 chalk 终端多色彩输出"></a>1.1.2 chalk 终端多色彩输出</h4><p><a target="_blank" rel="noopener" href="https://github.com/chalk/chalk">chalk</a></p>
<p>简单说，这个是用于终端显示<font color=#FF0000>花</font><font color=#FFFF00>里</font><font color=#FFA500>胡</font><font color=#00FF00>哨</font>多色彩输出。</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311525941.jpg" alt="终端输出"></p>
<h4 id="1-1-3-semver-语义化版本"><a href="#1-1-3-semver-语义化版本" class="headerlink" title="1.1.3 semver 语义化版本"></a>1.1.3 semver 语义化版本</h4><p><a target="_blank" rel="noopener" href="https://github.com/npm/node-semver">semver</a></p>
<p>语义化版本的nodejs实现，就是可以用人眼看出来的版本，用于版本校验比较等。关于语义化版本可以看这个<a target="_blank" rel="noopener" href="https://semver.org/lang/zh-CN/">语义化版本 2.0.0 文档</a></p>
<blockquote>
<p>版本格式：主版本号.次版本号.修订号，版本号递增规则如下：<br>主版本号：当你做了不兼容的 API 修改，<br>次版本号：当你做了向下兼容的功能性新增，<br>修订号：当你做了向下兼容的问题修正。<br>先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。</p>
</blockquote>
<h4 id="1-1-4-enquirer-交互式询问-CLI"><a href="#1-1-4-enquirer-交互式询问-CLI" class="headerlink" title="1.1.4 enquirer 交互式询问 CLI"></a>1.1.4 enquirer 交互式询问 CLI</h4><p>简单说就是交互式询问用户输入，你敲在终端上面的东西会被他接收。</p>
<p><a target="_blank" rel="noopener" href="https://github.com/enquirer/enquirer">enquirer</a></p>
<h4 id="1-1-5-execa-执行命令"><a href="#1-1-5-execa-执行命令" class="headerlink" title="1.1.5 execa 执行命令"></a>1.1.5 execa 执行命令</h4><p>简单说就是执行命令的，帮你自动化输入命令,类似我们自己在终端输入命令，比如 <code>echo Vixcity</code>。</p>
<p><a target="_blank" rel="noopener" href="https://github.com/sindresorhus/execa">execa</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 例子</span></span><br><span class="line"><span class="keyword">const</span> execa = <span class="built_in">require</span>(<span class="string">&#x27;execa&#x27;</span>);</span><br><span class="line"></span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123;stdout&#125; = <span class="keyword">await</span> execa(<span class="string">&#x27;echo&#x27;</span>, [<span class="string">&#x27;Vixcity&#x27;</span>]);</span><br><span class="line">  <span class="built_in">console</span>.log(stdout);</span><br><span class="line">  <span class="comment">//=&gt; &#x27;Vixcity&#x27;</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<p>到此，第一部分的引入的依赖包的内容我们就看完了，接着我们来看第二部分的内容（10-18行）</p>
<h3 id="1-2-第二部分"><a href="#1-2-第二部分" class="headerlink" title="1.2 第二部分"></a>1.2 第二部分</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue-next/scripts/release.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 对应 yarn run release --preid=beta</span></span><br><span class="line"><span class="comment">// beta</span></span><br><span class="line"><span class="keyword">const</span> preId =</span><br><span class="line">  args.preid ||</span><br><span class="line">  (semver.prerelease(currentVersion) &amp;&amp; semver.prerelease(currentVersion)[<span class="number">0</span>])</span><br><span class="line"><span class="comment">// 对应 yarn run release --dry</span></span><br><span class="line"><span class="comment">// true</span></span><br><span class="line"><span class="keyword">const</span> isDryRun = args.dry</span><br><span class="line"><span class="comment">// 对应 yarn run release --skipTests</span></span><br><span class="line"><span class="comment">// true 跳过测试</span></span><br><span class="line"><span class="keyword">const</span> skipTests = args.skipTests</span><br><span class="line"><span class="comment">// 对应 yarn run release --skipBuild </span></span><br><span class="line"><span class="comment">// true</span></span><br><span class="line"><span class="keyword">const</span> skipBuild = args.skipBuild</span><br><span class="line"></span><br><span class="line"><span class="comment">// 读取 packages 文件夹，过滤掉 不是 .ts文件 结尾 并且不是 . 开头的文件夹</span></span><br><span class="line"><span class="keyword">const</span> packages = fs</span><br><span class="line">  .readdirSync(path.resolve(__dirname, <span class="string">&#x27;../packages&#x27;</span>))</span><br><span class="line">  .filter(<span class="function"><span class="params">p</span> =&gt;</span> !p.endsWith(<span class="string">&#x27;.ts&#x27;</span>) &amp;&amp; !p.startsWith(<span class="string">&#x27;.&#x27;</span>))</span><br></pre></td></tr></table></figure>

<p>这一部分川神并没有具体详细的进行解释，那么这里我就来补充一下</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> preId =</span><br><span class="line">  args.preid ||</span><br><span class="line">  (semver.prerelease(currentVersion) &amp;&amp; semver.prerelease(currentVersion)[<span class="number">0</span>])</span><br></pre></td></tr></table></figure>

<p>10-12 ：这里的 args 是之前获取的命令行里面的参数，里面的 preid 应该是预发布的版本号</p>
<p>如果没有预发布的版本号的话，那么就看当前的版本号以及当前版本号的第0个元素是否存在，进行返回一个布尔值</p>
<p>13 ：判断是否为 dry 启动的，如果是的话，那么就跳过一些发布版本之类的重要环节</p>
<p>14-15 ：是否跳过测试和构建的环节</p>
<p>16-18 ：读取 packages 文件夹，过滤掉 不是 .ts文件 结尾 并且不是 . 开头的文件夹</p>
<h3 id="1-3-第三部分"><a href="#1-3-第三部分" class="headerlink" title="1.3 第三部分"></a>1.3 第三部分</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue-next/scripts/release.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 跳过的包</span></span><br><span class="line"><span class="keyword">const</span> skippedPackages = []</span><br><span class="line"></span><br><span class="line"><span class="comment">// 版本递增</span></span><br><span class="line"><span class="keyword">const</span> versionIncrements = [</span><br><span class="line">  <span class="string">&#x27;patch&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;minor&#x27;</span>,</span><br><span class="line">  <span class="string">&#x27;major&#x27;</span>,</span><br><span class="line">  ...(preId ? [<span class="string">&#x27;prepatch&#x27;</span>, <span class="string">&#x27;preminor&#x27;</span>, <span class="string">&#x27;premajor&#x27;</span>, <span class="string">&#x27;prerelease&#x27;</span>] : [])</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> inc = <span class="function"><span class="params">i</span> =&gt;</span> semver.inc(currentVersion, i, preId)</span><br></pre></td></tr></table></figure>

<p>这一块可能不是很好理解。<code>inc</code>是生成一个版本。更多可以查看<a target="_blank" rel="noopener" href="https://github.com/npm/node-semver#prerelease-identifiers">semver文档</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">semver.inc(<span class="string">&#x27;3.2.4&#x27;</span>, <span class="string">&#x27;prerelease&#x27;</span>, <span class="string">&#x27;beta&#x27;</span>)</span><br><span class="line"><span class="comment">// 3.2.5-beta.0</span></span><br></pre></td></tr></table></figure>

<h3 id="1-4-第四部分"><a href="#1-4-第四部分" class="headerlink" title="1.4 第四部分"></a>1.4 第四部分</h3><p>第四部分声明了一些执行脚本函数等</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// vue-next/scripts/release.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取 bin 命令</span></span><br><span class="line"><span class="keyword">const</span> bin = <span class="function"><span class="params">name</span> =&gt;</span> path.resolve(__dirname, <span class="string">&#x27;../node_modules/.bin/&#x27;</span> + name)</span><br><span class="line"><span class="keyword">const</span> run = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line">  execa(bin, args, &#123; <span class="attr">stdio</span>: <span class="string">&#x27;inherit&#x27;</span>, ...opts &#125;)</span><br><span class="line"><span class="keyword">const</span> dryRun = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line">  <span class="built_in">console</span>.log(chalk.blue(<span class="string">`[dryrun] <span class="subst">$&#123;bin&#125;</span> <span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>`</span>), opts)</span><br><span class="line"><span class="keyword">const</span> runIfNotDry = isDryRun ? dryRun : run</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取包的路径</span></span><br><span class="line"><span class="keyword">const</span> getPkgRoot = <span class="function"><span class="params">pkg</span> =&gt;</span> path.resolve(__dirname, <span class="string">&#x27;../packages/&#x27;</span> + pkg)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台输出</span></span><br><span class="line"><span class="keyword">const</span> step = <span class="function"><span class="params">msg</span> =&gt;</span> <span class="built_in">console</span>.log(chalk.cyan(msg))</span><br></pre></td></tr></table></figure>

<h4 id="1-4-1-bin-函数"><a href="#1-4-1-bin-函数" class="headerlink" title="1.4.1 bin 函数"></a>1.4.1 bin 函数</h4><p>获取 <code>node_modules/.bin/</code> 目录下的命令，整个文件就用了一次。</p>
<p>其中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> dryRun = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line">  <span class="built_in">console</span>.log(chalk.blue(<span class="string">`[dryrun] <span class="subst">$&#123;bin&#125;</span> <span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>`</span>), opts)</span><br></pre></td></tr></table></figure>

<p>以上这段代码对应我们刚才的启动起来的方式，是 dry 方式启动起来的话，那么就不做啥具体的内容，只是打印</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">bin(<span class="string">&#x27;jest&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>相当于在命令终端，项目根目录 运行 <code>./node_modules/.bin/jest</code> 命令。</p>
<h4 id="1-4-2-run、dryRun、runIfNotDry"><a href="#1-4-2-run、dryRun、runIfNotDry" class="headerlink" title="1.4.2 run、dryRun、runIfNotDry"></a>1.4.2 run、dryRun、runIfNotDry</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> run = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line">  execa(bin, args, &#123; <span class="attr">stdio</span>: <span class="string">&#x27;inherit&#x27;</span>, ...opts &#125;)</span><br><span class="line"><span class="keyword">const</span> dryRun = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line">  <span class="built_in">console</span>.log(chalk.blue(<span class="string">`[dryrun] <span class="subst">$&#123;bin&#125;</span> <span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>`</span>), opts)</span><br><span class="line"><span class="keyword">const</span> runIfNotDry = isDryRun ? dryRun : run</span><br></pre></td></tr></table></figure>

<p><code>run</code> 真实在终端跑命令，比如 <code>yarn build --release</code></p>
<p><code>dryRun</code> 则是不跑，只是 <code>console.log();</code> 打印 ‘yarn build –release’</p>
<p><code>runIfNotDry</code> 如果不是空跑就执行命令。isDryRun 参数是通过控制台输入的。<code>yarn run release --dry</code>这样就是<code>true</code>。<code>runIfNotDry</code>就是只是打印，不执行命令。这样设计的好处在于，可以有时不想直接提交，要先看看执行命令的结果。不得不说，尤大就是会玩。<br>在 <code>main</code> 函数末尾，也可以看到类似的提示。可以用<code>git diff</code>先看看文件修改。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (isDryRun) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`\nDry run finished - run git diff to see package changes.`</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>看完了文件开头的一些依赖引入和函数声明等，我们接着来看<code>main</code>主入口函数。</p>
<h2 id="2-main-主流程"><a href="#2-main-主流程" class="headerlink" title="2. main 主流程"></a>2. main 主流程</h2><p>第2节，主要都是<code>main</code> 函数拆解分析</p>
<h3 id="2-1-流程梳理-main-函数"><a href="#2-1-流程梳理-main-函数" class="headerlink" title="2.1 流程梳理 main 函数"></a>2.1 流程梳理 main 函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">&#x27;chalk&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> step = <span class="function"><span class="params">msg</span> =&gt;</span> <span class="built_in">console</span>.log(chalk.cyan(msg))</span><br><span class="line"><span class="comment">// 前面一堆依赖引入和函数定义等</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 版本校验</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// run tests before release</span></span><br><span class="line">  step(<span class="string">&#x27;\nRunning tests...&#x27;</span>)</span><br><span class="line">  <span class="comment">// update all package versions and inter-dependencies</span></span><br><span class="line">  step(<span class="string">&#x27;\nUpdating cross dependencies...&#x27;</span>)</span><br><span class="line">  <span class="comment">// build all packages with types</span></span><br><span class="line">  step(<span class="string">&#x27;\nBuilding all packages...&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// generate changelog</span></span><br><span class="line">  step(<span class="string">&#x27;\nCommitting changes...&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// publish packages</span></span><br><span class="line">  step(<span class="string">&#x27;\nPublishing packages...&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// push to GitHub</span></span><br><span class="line">  step(<span class="string">&#x27;\nPushing to GitHub...&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">main().catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.error(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>上面的<code>main</code>函数省略了很多具体函数实现。接下来我们拆解 <code>main</code> 函数。</p>
<h3 id="2-2-确认要发布的版本"><a href="#2-2-确认要发布的版本" class="headerlink" title="2.2 确认要发布的版本"></a>2.2 确认要发布的版本</h3><p>第一段代码虽然比较长，但是还好理解。 主要就是确认要发布的版本。</p>
<p>调试时，我们看下这段的两张截图，就好理解啦。</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311622321.jpg" alt="终端输出选择版本号"></p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202108311622717.jpg" alt="终端输入确认版本号"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 根据上文 mini 这句代码意思是 yarn run release 3.2.4 </span></span><br><span class="line"><span class="comment">// 取到参数 3.2.4</span></span><br><span class="line"><span class="comment">// 我们是dry方式启动的，所以现在这个targetVersion为undefined</span></span><br><span class="line"><span class="keyword">let</span> targetVersion = args._[<span class="number">0</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (!targetVersion) &#123;</span><br><span class="line">  <span class="comment">// no explicit version, offer suggestions</span></span><br><span class="line">  <span class="keyword">const</span> &#123; release &#125; = <span class="keyword">await</span> prompt(&#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&#x27;select&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;release&#x27;</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&#x27;Select release type&#x27;</span>,</span><br><span class="line">    <span class="attr">choices</span>: versionIncrements.map(<span class="function"><span class="params">i</span> =&gt;</span> <span class="string">`<span class="subst">$&#123;i&#125;</span> (<span class="subst">$&#123;inc(i)&#125;</span>)`</span>).concat([<span class="string">&#x27;custom&#x27;</span>])</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 选自定义</span></span><br><span class="line">  <span class="keyword">if</span> (release === <span class="string">&#x27;custom&#x27;</span>) &#123;</span><br><span class="line">    targetVersion = (</span><br><span class="line">      <span class="keyword">await</span> prompt(&#123;</span><br><span class="line">        <span class="attr">type</span>: <span class="string">&#x27;input&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;version&#x27;</span>,</span><br><span class="line">        <span class="attr">message</span>: <span class="string">&#x27;Input custom version&#x27;</span>,</span><br><span class="line">        <span class="attr">initial</span>: currentVersion</span><br><span class="line">      &#125;)</span><br><span class="line">    ).version</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 取到括号里的版本号</span></span><br><span class="line">    targetVersion = release.match(<span class="regexp">/\((.*)\)/</span>)[<span class="number">1</span>]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 校验 版本是否符合 规范</span></span><br><span class="line"><span class="keyword">if</span> (!semver.valid(targetVersion)) &#123;</span><br><span class="line">  <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">`invalid target version: <span class="subst">$&#123;targetVersion&#125;</span>`</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 确认要 release</span></span><br><span class="line"><span class="keyword">const</span> &#123; yes &#125; = <span class="keyword">await</span> prompt(&#123;</span><br><span class="line">  <span class="attr">type</span>: <span class="string">&#x27;confirm&#x27;</span>,</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;yes&#x27;</span>,</span><br><span class="line">  <span class="attr">message</span>: <span class="string">`Releasing v<span class="subst">$&#123;targetVersion&#125;</span>. Confirm?`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// false 直接返回</span></span><br><span class="line"><span class="keyword">if</span> (!yes) &#123;</span><br><span class="line">  <span class="keyword">return</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-3-执行测试用例"><a href="#2-3-执行测试用例" class="headerlink" title="2.3 执行测试用例"></a>2.3 执行测试用例</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// run tests before release</span></span><br><span class="line"><span class="comment">// 下面这一段话是在终端打印换行这个 Running tests...</span></span><br><span class="line">step(<span class="string">&#x27;\nRunning tests...&#x27;</span>)</span><br><span class="line"><span class="keyword">if</span> (!skipTests &amp;&amp; !isDryRun) &#123;</span><br><span class="line">  <span class="keyword">await</span> run(bin(<span class="string">&#x27;jest&#x27;</span>), [<span class="string">&#x27;--clearCache&#x27;</span>])</span><br><span class="line">  <span class="keyword">await</span> run(<span class="string">&#x27;yarn&#x27;</span>, [<span class="string">&#x27;test&#x27;</span>, <span class="string">&#x27;--bail&#x27;</span>])</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`(skipped)`</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-4-更新所有包的版本号和内部-vue-相关依赖版本号"><a href="#2-4-更新所有包的版本号和内部-vue-相关依赖版本号" class="headerlink" title="2.4 更新所有包的版本号和内部 vue 相关依赖版本号"></a>2.4 更新所有包的版本号和内部 vue 相关依赖版本号</h3><p>这一部分，就是更新根目录下<code>package.json</code> 的版本号和所有 <code>packages</code> 的版本号。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// update all package versions and inter-dependencies</span></span><br><span class="line">step(<span class="string">&#x27;\nUpdating cross dependencies...&#x27;</span>)</span><br><span class="line">updateVersions(targetVersion)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">updateVersions</span>(<span class="params">version</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 1. update root package.json</span></span><br><span class="line">  updatePackage(path.resolve(__dirname, <span class="string">&#x27;..&#x27;</span>), version)</span><br><span class="line">  <span class="comment">// 2. update all packages</span></span><br><span class="line">  packages.forEach(<span class="function"><span class="params">p</span> =&gt;</span> updatePackage(getPkgRoot(p), version))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="2-4-1-updatePackage-更新包的版本号"><a href="#2-4-1-updatePackage-更新包的版本号" class="headerlink" title="2.4.1 updatePackage 更新包的版本号"></a>2.4.1 updatePackage 更新包的版本号</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">updatePackage</span>(<span class="params">pkgRoot, version</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> pkgPath = path.resolve(pkgRoot, <span class="string">&#x27;package.json&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> pkg = <span class="built_in">JSON</span>.parse(fs.readFileSync(pkgPath, <span class="string">&#x27;utf-8&#x27;</span>))</span><br><span class="line">  <span class="comment">// 自己本身 package.json 的版本号</span></span><br><span class="line">  pkg.version = version</span><br><span class="line">  </span><br><span class="line">  <span class="comment">// packages.json 中 dependencies 中 vue 相关的依赖修改</span></span><br><span class="line">  updateDeps(pkg, <span class="string">&#x27;dependencies&#x27;</span>, version)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// packages.json 中 peerDependencies 中 vue 相关的依赖修改</span></span><br><span class="line">  updateDeps(pkg, <span class="string">&#x27;peerDependencies&#x27;</span>, version)</span><br><span class="line">  fs.writeFileSync(pkgPath, <span class="built_in">JSON</span>.stringify(pkg, <span class="literal">null</span>, <span class="number">2</span>) + <span class="string">&#x27;\n&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>主要就是三种修改。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. 自己本身 package.json 的版本号</span><br><span class="line">2. packages.json 中 dependencies 中 vue 相关的依赖修改</span><br><span class="line">3. packages.json 中 peerDependencies 中 vue 相关的依赖修改</span><br></pre></td></tr></table></figure>

<p>一图胜千言。我们执行<code>yarn release --dry</code> 后 <code>git diff</code> 查看的 <code>git</code> 修改，部分截图如下。</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109010950266.jpg" alt="更新的版本号举例"></p>
<h4 id="2-4-2-updateDeps-更新内部-vue-相关依赖的版本号"><a href="#2-4-2-updateDeps-更新内部-vue-相关依赖的版本号" class="headerlink" title="2.4.2 updateDeps 更新内部 vue 相关依赖的版本号"></a>2.4.2 updateDeps 更新内部 vue 相关依赖的版本号</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">updateDeps</span>(<span class="params">pkg, depType, version</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> deps = pkg[depType]</span><br><span class="line">  <span class="keyword">if</span> (!deps) <span class="keyword">return</span></span><br><span class="line">  <span class="built_in">Object</span>.keys(deps).forEach(<span class="function"><span class="params">dep</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (</span><br><span class="line">      dep === <span class="string">&#x27;vue&#x27;</span> ||</span><br><span class="line">      (dep.startsWith(<span class="string">&#x27;@vue&#x27;</span>) &amp;&amp; packages.includes(dep.replace(<span class="regexp">/^@vue\//</span>, <span class="string">&#x27;&#x27;</span>)))</span><br><span class="line">    ) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(</span><br><span class="line">        chalk.yellow(<span class="string">`<span class="subst">$&#123;pkg.name&#125;</span> -&gt; <span class="subst">$&#123;depType&#125;</span> -&gt; <span class="subst">$&#123;dep&#125;</span>@<span class="subst">$&#123;version&#125;</span>`</span>)</span><br><span class="line">      )</span><br><span class="line">      deps[dep] = version</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>一图胜千言。我们在终端执行<code>yarn release --dry</code>。会看到这样是输出。</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109010950084.jpg" alt="更新 Vue 相关依赖的终端输出"></p>
<p>也就是这句代码输出的。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">  chalk.yellow(<span class="string">`<span class="subst">$&#123;pkg.name&#125;</span> -&gt; <span class="subst">$&#123;depType&#125;</span> -&gt; <span class="subst">$&#123;dep&#125;</span>@<span class="subst">$&#123;version&#125;</span>`</span>)</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<h3 id="2-5-打包编译所有包"><a href="#2-5-打包编译所有包" class="headerlink" title="2.5 打包编译所有包"></a>2.5 打包编译所有包</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// build all packages with types</span></span><br><span class="line">step(<span class="string">&#x27;\nBuilding all packages...&#x27;</span>)</span><br><span class="line"><span class="keyword">if</span> (!skipBuild &amp;&amp; !isDryRun) &#123;</span><br><span class="line">  <span class="keyword">await</span> run(<span class="string">&#x27;yarn&#x27;</span>, [<span class="string">&#x27;build&#x27;</span>, <span class="string">&#x27;--release&#x27;</span>])</span><br><span class="line">  <span class="comment">// test generated dts files</span></span><br><span class="line">  step(<span class="string">&#x27;\nVerifying type declarations...&#x27;</span>)</span><br><span class="line">  <span class="keyword">await</span> run(<span class="string">&#x27;yarn&#x27;</span>, [<span class="string">&#x27;test-dts-only&#x27;</span>])</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`(skipped)`</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-6-生成-changelog"><a href="#2-6-生成-changelog" class="headerlink" title="2.6 生成 changelog"></a>2.6 生成 changelog</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// generate changelog</span></span><br><span class="line"><span class="keyword">await</span> run(<span class="string">`yarn`</span>, [<span class="string">&#x27;changelog&#x27;</span>])</span><br></pre></td></tr></table></figure>

<p><code>yarn changelog</code> 对应的脚本是<code>conventional-changelog -p angular -i CHANGELOG.md -s</code>。</p>
<h3 id="2-7-提交代码"><a href="#2-7-提交代码" class="headerlink" title="2.7 提交代码"></a>2.7 提交代码</h3><p>经过更新版本号后，有文件改动，于是<code>git diff</code>。 是否有文件改动，如果有提交。</p>
<p><code>git add -A</code> <code>git commit -m &#39;release: v$&#123;targetVersion&#125;&#39;</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; stdout &#125; = <span class="keyword">await</span> run(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;diff&#x27;</span>], &#123; <span class="attr">stdio</span>: <span class="string">&#x27;pipe&#x27;</span> &#125;)</span><br><span class="line"><span class="keyword">if</span> (stdout) &#123;</span><br><span class="line">  step(<span class="string">&#x27;\nCommitting changes...&#x27;</span>)</span><br><span class="line">  <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;add&#x27;</span>, <span class="string">&#x27;-A&#x27;</span>])</span><br><span class="line">  <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;commit&#x27;</span>, <span class="string">&#x27;-m&#x27;</span>, <span class="string">`release: v<span class="subst">$&#123;targetVersion&#125;</span>`</span>])</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&#x27;No changes to commit.&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-8-发布包"><a href="#2-8-发布包" class="headerlink" title="2.8 发布包"></a>2.8 发布包</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// publish packages</span></span><br><span class="line">step(<span class="string">&#x27;\nPublishing packages...&#x27;</span>)</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> pkg <span class="keyword">of</span> packages) &#123;</span><br><span class="line">  <span class="keyword">await</span> publishPackage(pkg, targetVersion, runIfNotDry)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这段函数比较长，可以不用细看，简单说就是 <code>yarn publish</code> 发布包。 我们 <code>yarn release --dry</code>后，这块函数在终端输出的如下：</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109011011990.jpg" alt="发布终端输出命令"></p>
<p>值得一提的是，如果是 <code>vue</code> 默认有个 <code>tag</code> 为 <code>next</code>。当 <code>Vue 3.x</code> 是默认时删除。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (pkgName === <span class="string">&#x27;vue&#x27;</span>) &#123;</span><br><span class="line">  <span class="comment">// TODO remove when 3.x becomes default</span></span><br><span class="line">  releaseTag = <span class="string">&#x27;next&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>也就是为什么我们现在安装 <code>vue3</code> 还是 <code>npm i vue@next</code>命令。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">publishPackage</span>(<span class="params">pkgName, version, runIfNotDry</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 如果在 跳过包里 则跳过</span></span><br><span class="line">  <span class="keyword">if</span> (skippedPackages.includes(pkgName)) &#123;</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">const</span> pkgRoot = getPkgRoot(pkgName)</span><br><span class="line">  <span class="keyword">const</span> pkgPath = path.resolve(pkgRoot, <span class="string">&#x27;package.json&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> pkg = <span class="built_in">JSON</span>.parse(fs.readFileSync(pkgPath, <span class="string">&#x27;utf-8&#x27;</span>))</span><br><span class="line">  <span class="keyword">if</span> (pkg.private) &#123;</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// For now, all 3.x packages except &quot;vue&quot; can be published as</span></span><br><span class="line">  <span class="comment">// `latest`, whereas &quot;vue&quot; will be published under the &quot;next&quot; tag.</span></span><br><span class="line">  <span class="keyword">let</span> releaseTag = <span class="literal">null</span></span><br><span class="line">  <span class="keyword">if</span> (args.tag) &#123;</span><br><span class="line">    releaseTag = args.tag</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (version.includes(<span class="string">&#x27;alpha&#x27;</span>)) &#123;</span><br><span class="line">    releaseTag = <span class="string">&#x27;alpha&#x27;</span></span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (version.includes(<span class="string">&#x27;beta&#x27;</span>)) &#123;</span><br><span class="line">    releaseTag = <span class="string">&#x27;beta&#x27;</span></span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (version.includes(<span class="string">&#x27;rc&#x27;</span>)) &#123;</span><br><span class="line">    releaseTag = <span class="string">&#x27;rc&#x27;</span></span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span> (pkgName === <span class="string">&#x27;vue&#x27;</span>) &#123;</span><br><span class="line">    <span class="comment">// TODO remove when 3.x becomes default</span></span><br><span class="line">    releaseTag = <span class="string">&#x27;next&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// TODO use inferred release channel after official 3.0 release</span></span><br><span class="line">  <span class="comment">// const releaseTag = semver.prerelease(version)[0] || null</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 上面的图片输出的就是这一段话</span></span><br><span class="line">  step(<span class="string">`Publishing <span class="subst">$&#123;pkgName&#125;</span>...`</span>)</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">await</span> runIfNotDry(</span><br><span class="line">      <span class="string">&#x27;yarn&#x27;</span>,</span><br><span class="line">      [</span><br><span class="line">        <span class="string">&#x27;publish&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;--new-version&#x27;</span>,</span><br><span class="line">        version,</span><br><span class="line">        ...(releaseTag ? [<span class="string">&#x27;--tag&#x27;</span>, releaseTag] : []),</span><br><span class="line">        <span class="string">&#x27;--access&#x27;</span>,</span><br><span class="line">        <span class="string">&#x27;public&#x27;</span></span><br><span class="line">      ],</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">cwd</span>: pkgRoot,</span><br><span class="line">        <span class="attr">stdio</span>: <span class="string">&#x27;pipe&#x27;</span></span><br><span class="line">      &#125;</span><br><span class="line">    )</span><br><span class="line">    <span class="built_in">console</span>.log(chalk.green(<span class="string">`Successfully published <span class="subst">$&#123;pkgName&#125;</span>@<span class="subst">$&#123;version&#125;</span>`</span>))</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    <span class="keyword">if</span> (e.stderr.match(<span class="regexp">/previously published/</span>)) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(chalk.red(<span class="string">`Skipping already published: <span class="subst">$&#123;pkgName&#125;</span>`</span>))</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">throw</span> e</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-9-推送到-github"><a href="#2-9-推送到-github" class="headerlink" title="2.9 推送到 github"></a>2.9 推送到 github</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// push to GitHub</span></span><br><span class="line">step(<span class="string">&#x27;\nPushing to GitHub...&#x27;</span>)</span><br><span class="line"><span class="comment">// 打 tag</span></span><br><span class="line"><span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;tag&#x27;</span>, <span class="string">`v<span class="subst">$&#123;targetVersion&#125;</span>`</span>])</span><br><span class="line"><span class="comment">// 推送 tag</span></span><br><span class="line"><span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;push&#x27;</span>, <span class="string">&#x27;origin&#x27;</span>, <span class="string">`refs/tags/v<span class="subst">$&#123;targetVersion&#125;</span>`</span>])</span><br><span class="line"><span class="comment">// git push 所有改动到 远程  - github</span></span><br><span class="line"><span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;push&#x27;</span>])</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// yarn run release --dry</span></span><br><span class="line"><span class="comment">// 如果传了这个参数则输出 可以用 git diff 看看更改</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// const isDryRun = args.dry</span></span><br><span class="line"><span class="keyword">if</span> (isDryRun) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`\nDry run finished - run git diff to see package changes.`</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果 跳过的包，则输出以下这些包没有发布。不过代码 `skippedPackages` 里是没有包。</span></span><br><span class="line"><span class="comment">// 所以这段代码也不会执行。</span></span><br><span class="line"><span class="comment">// 我们习惯写 arr.length !== 0 其实 0 就是 false 。可以不写。</span></span><br><span class="line"><span class="keyword">if</span> (skippedPackages.length) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(</span><br><span class="line">    chalk.yellow(</span><br><span class="line">      <span class="string">`The following packages are skipped and NOT published:\n- <span class="subst">$&#123;skippedPackages.join(</span></span></span><br><span class="line"><span class="subst"><span class="string">        <span class="string">&#x27;\n- &#x27;</span></span></span></span><br><span class="line"><span class="subst"><span class="string">      )&#125;</span>`</span></span><br><span class="line">    )</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log()</span><br></pre></td></tr></table></figure>

<p>我们 <code>yarn release --dry</code>后，这块函数在终端输出的如下：</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109011024016.jpg" alt="发布到github"></p>
<p>到这里我们就拆解分析完 <code>main</code> 函数了。</p>
<p>整个流程很清晰。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">1. 确认要发布的版本</span><br><span class="line">2. 执行测试用例</span><br><span class="line">3. 更新所有包的版本号和内部 vue 相关依赖版本号</span><br><span class="line">    3.1 updatePackage 更新包的版本号</span><br><span class="line">    3.2 updateDeps 更新内部 vue 相关依赖的版本号</span><br><span class="line">4. 打包编译所有包</span><br><span class="line">5. 生成 changelog</span><br><span class="line">6. 提交代码</span><br><span class="line">7. 发布包</span><br><span class="line">8. 推送到 github</span><br></pre></td></tr></table></figure>

<h3 id="3-总结"><a href="#3-总结" class="headerlink" title="3. 总结"></a>3. 总结</h3><p>通过本文学习，我们学会了这些。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. 熟悉 vuejs 发布流程</span><br><span class="line">2. 学会调试 nodejs 代码</span><br><span class="line">3. 动手优化公司项目发布流程</span><br></pre></td></tr></table></figure>

<p><code>vuejs</code>发布的文件很多代码我们可以直接复制粘贴修改，优化我们自己发布的流程。</p>
<p>当然也可以用开源的 <a target="_blank" rel="noopener" href="https://github.com/release-it/release-it">release-it</a>。</p>
<p>同时，我们可以：</p>
<p>引入 <a target="_blank" rel="noopener" href="https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow">git flow</a>，管理<code>git</code>分支。估计很多人不知道<code>windows</code> <code>git bash</code>已经默认支持 <code>git flow</code>命令。</p>
<p>引入 <a target="_blank" rel="noopener" href="https://github.com/typicode/husky">husky</a> 和 <a target="_blank" rel="noopener" href="https://github.com/okonet/lint-staged">lint-staged</a> 提交<code>commit</code>时用<code>ESLint</code>等校验代码提交是否能够通过检测。</p>
<p>引入 单元测试 <a target="_blank" rel="noopener" href="https://github.com/facebook/jest">jest</a>，测试关键的工具函数等。</p>
<p>引入 <a target="_blank" rel="noopener" href="https://github.com/conventional-changelog/conventional-changelog">conventional-changelog</a></p>
<p>引入 <a target="_blank" rel="noopener" href="https://github.com/streamich/git-cz">git-cz</a> 交互式<code>git commit</code>。</p>
<h2 id="自己创建一个发布流程"><a href="#自己创建一个发布流程" class="headerlink" title="自己创建一个发布流程"></a>自己创建一个发布流程</h2><h2 id="1-步骤"><a href="#1-步骤" class="headerlink" title="1.步骤"></a>1.步骤</h2><p>思考：我们需要哪一些步骤？</p>
<p>因为博客系统没有 packages 文件包，所以我们不需要打包，测试用例目前水平有限，也暂且搁置</p>
<p>因为我们 npm istall xxx 或者 yarn add xxx 的时候，会自动在我们的 package.json 中加入相关依赖以及版本号</p>
<p>所以我们也不需要更新依赖以及包版本号</p>
<p>所以剩下来的总共有4步</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">1.  确认要发布是否发布</span><br><span class="line">2.  发布哪个版本</span><br><span class="line">3.  生成 changeLog</span><br><span class="line">4.  提交代码</span><br><span class="line">5.  推送到 github 和 gitee</span><br></pre></td></tr></table></figure>

<h2 id="2-代码"><a href="#2-代码" class="headerlink" title="2. 代码"></a>2. 代码</h2><p>代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> args = <span class="built_in">require</span>(<span class="string">&#x27;minimist&#x27;</span>)(process.argv.slice(<span class="number">2</span>))</span><br><span class="line"><span class="keyword">const</span> chalk = <span class="built_in">require</span>(<span class="string">&#x27;chalk&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123; prompt &#125; = <span class="built_in">require</span>(<span class="string">&#x27;enquirer&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> execa = <span class="built_in">require</span>(<span class="string">&#x27;execa&#x27;</span>)</span><br><span class="line">  </span><br><span class="line"><span class="keyword">const</span> isDryRun = args.dry</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> run = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line"> execa(bin, args, &#123; <span class="attr">stdio</span>: <span class="string">&#x27;inherit&#x27;</span>, ...opts &#125;)</span><br><span class="line"><span class="keyword">const</span> dryRun = <span class="function">(<span class="params">bin, args, opts = &#123;&#125;</span>) =&gt;</span></span><br><span class="line"> <span class="built_in">console</span>.log(chalk.blue(<span class="string">`[dryrun] <span class="subst">$&#123;bin&#125;</span> <span class="subst">$&#123;args.join(<span class="string">&#x27; &#x27;</span>)&#125;</span>`</span>), opts)</span><br><span class="line"><span class="keyword">const</span> runIfNotDry = isDryRun ? dryRun : run</span><br><span class="line"><span class="keyword">const</span> step = <span class="function"><span class="params">msg</span> =&gt;</span> <span class="built_in">console</span>.log(chalk.cyan(msg))  </span><br><span class="line"></span><br><span class="line"><span class="comment">// 格式化日期，并把日期转成字符串</span></span><br><span class="line"><span class="built_in">Date</span>.prototype.Format = <span class="function"><span class="keyword">function</span>(<span class="params">formatStr</span>) </span></span><br><span class="line"><span class="function"></span>&#123; </span><br><span class="line">  <span class="keyword">var</span> str = formatStr; </span><br><span class="line">  <span class="keyword">var</span> Week = [<span class="string">&#x27;日&#x27;</span>,<span class="string">&#x27;一&#x27;</span>,<span class="string">&#x27;二&#x27;</span>,<span class="string">&#x27;三&#x27;</span>,<span class="string">&#x27;四&#x27;</span>,<span class="string">&#x27;五&#x27;</span>,<span class="string">&#x27;六&#x27;</span>]; </span><br><span class="line">  str=str.replace(<span class="regexp">/yyyy|YYYY/</span>,<span class="built_in">this</span>.getFullYear()); </span><br><span class="line">  str=str.replace(<span class="regexp">/yy|YY/</span>,(<span class="built_in">this</span>.getYear() % <span class="number">100</span>)&gt;<span class="number">9</span>?(<span class="built_in">this</span>.getYear() % <span class="number">100</span>).toString():<span class="string">&#x27;0&#x27;</span> + (<span class="built_in">this</span>.getYear() % <span class="number">100</span>)); </span><br><span class="line">  str=str.replace(<span class="regexp">/MM/</span>,<span class="built_in">this</span>.getMonth()&gt;<span class="number">9</span>?<span class="built_in">this</span>.getMonth().toString():<span class="string">&#x27;0&#x27;</span> + <span class="built_in">this</span>.getMonth()); </span><br><span class="line">  str=str.replace(<span class="regexp">/M/g</span>,<span class="built_in">this</span>.getMonth()); </span><br><span class="line">  str=str.replace(<span class="regexp">/w|W/g</span>,Week[<span class="built_in">this</span>.getDay()]); </span><br><span class="line">  str=str.replace(<span class="regexp">/dd|DD/</span>,<span class="built_in">this</span>.getDate()&gt;<span class="number">9</span>?<span class="built_in">this</span>.getDate().toString():<span class="string">&#x27;0&#x27;</span> + <span class="built_in">this</span>.getDate()); </span><br><span class="line">  str=str.replace(<span class="regexp">/d|D/g</span>,<span class="built_in">this</span>.getDate()); </span><br><span class="line">  str=str.replace(<span class="regexp">/hh|HH/</span>,<span class="built_in">this</span>.getHours()&gt;<span class="number">9</span>?<span class="built_in">this</span>.getHours().toString():<span class="string">&#x27;0&#x27;</span> + <span class="built_in">this</span>.getHours()); </span><br><span class="line">  str=str.replace(<span class="regexp">/h|H/g</span>,<span class="built_in">this</span>.getHours()); </span><br><span class="line">  str=str.replace(<span class="regexp">/mm/</span>,<span class="built_in">this</span>.getMinutes()&gt;<span class="number">9</span>?<span class="built_in">this</span>.getMinutes().toString():<span class="string">&#x27;0&#x27;</span> + <span class="built_in">this</span>.getMinutes()); </span><br><span class="line">  str=str.replace(<span class="regexp">/m/g</span>,<span class="built_in">this</span>.getMinutes()); </span><br><span class="line">  str=str.replace(<span class="regexp">/ss|SS/</span>,<span class="built_in">this</span>.getSeconds()&gt;<span class="number">9</span>?<span class="built_in">this</span>.getSeconds().toString():<span class="string">&#x27;0&#x27;</span> + <span class="built_in">this</span>.getSeconds()); </span><br><span class="line">  str=str.replace(<span class="regexp">/s|S/g</span>,<span class="built_in">this</span>.getSeconds()); </span><br><span class="line">  <span class="keyword">return</span> str; </span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line">  </span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> targetVersion = args._[<span class="number">0</span>]</span><br><span class="line">  <span class="keyword">let</span> whereCK</span><br><span class="line">  <span class="keyword">let</span> now = <span class="keyword">new</span> <span class="built_in">Date</span>().Format(<span class="string">&#x27;YYYY-MM-DD hh:mm:ss&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 是否发布远程仓库</span></span><br><span class="line">  <span class="keyword">if</span> (!targetVersion) &#123;</span><br><span class="line">   <span class="keyword">const</span> &#123; release &#125; = <span class="keyword">await</span> prompt (&#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&#x27;select&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;release&#x27;</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&#x27;是否更新发布到云端仓库&#x27;</span>,</span><br><span class="line">    <span class="attr">choices</span>: [<span class="string">&#x27;是&#x27;</span>,<span class="string">&#x27;否&#x27;</span>]</span><br><span class="line">    &#125;)  </span><br><span class="line"></span><br><span class="line">   <span class="comment">// 输入更新的内容</span></span><br><span class="line">   <span class="keyword">if</span> (release === <span class="string">&#x27;是&#x27;</span>) &#123;</span><br><span class="line">   targetVersion = (</span><br><span class="line">     <span class="keyword">await</span> prompt(&#123;</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&#x27;input&#x27;</span>,</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;version&#x27;</span>,</span><br><span class="line">      <span class="attr">message</span>: <span class="string">&#x27;请输入你的更新的内容&#x27;</span>,</span><br><span class="line">      <span class="attr">initial</span>: now + <span class="string">&#x27; 更新&#x27;</span></span><br><span class="line">     &#125;)</span><br><span class="line">    ).version</span><br><span class="line">   &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span></span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   whereCK = <span class="keyword">await</span> prompt (&#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&#x27;select&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;whereCK&#x27;</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&#x27;发到哪个仓库&#x27;</span>,</span><br><span class="line">    <span class="attr">choices</span>: [<span class="string">&#x27;全部&#x27;</span>,<span class="string">&#x27;Github&#x27;</span>,<span class="string">&#x27;Gitee&#x27;</span>]</span><br><span class="line">   &#125;)</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 产生 changelog</span></span><br><span class="line">  <span class="keyword">await</span> run(<span class="string">`yarn`</span>, [<span class="string">&#x27;changelog&#x27;</span>])</span><br><span class="line">  <span class="keyword">const</span> &#123; stdout &#125; = <span class="keyword">await</span> run(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;diff&#x27;</span>], &#123; <span class="attr">stdio</span>: <span class="string">&#x27;pipe&#x27;</span> &#125;)</span><br><span class="line">  <span class="keyword">if</span> (stdout) &#123;</span><br><span class="line">   step(<span class="string">&#x27;\n提交更改的内容...&#x27;</span>)</span><br><span class="line">   <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;add&#x27;</span>, <span class="string">&#x27;-A&#x27;</span>])</span><br><span class="line">   <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;commit&#x27;</span>, <span class="string">&#x27;-m&#x27;</span>, <span class="string">`更新内容：<span class="subst">$&#123;targetVersion&#125;</span>`</span>])</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">   <span class="built_in">console</span>.log(<span class="string">&#x27;No changes to commit.&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 推送到 GitHub 和 Gitee</span></span><br><span class="line">  step(<span class="string">&#x27;\n推送到对应的仓库...&#x27;</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">switch</span> (whereCK.whereCK) &#123;</span><br><span class="line">   <span class="keyword">case</span> <span class="string">&#x27;全部&#x27;</span>:</span><br><span class="line">    <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;push&#x27;</span>, <span class="string">&#x27;gitee&#x27;</span>, <span class="string">`master`</span>])</span><br><span class="line">    step(<span class="string">&#x27;\n&#x27;</span>)</span><br><span class="line">    <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;push&#x27;</span>, <span class="string">&#x27;github&#x27;</span>, <span class="string">`master`</span>])</span><br><span class="line">    step(<span class="string">&#x27;\n&#x27;</span>)</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">   <span class="keyword">case</span> <span class="string">&#x27;gitee&#x27;</span>:</span><br><span class="line">    <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;push&#x27;</span>, <span class="string">&#x27;gitee&#x27;</span>, <span class="string">`master`</span>])</span><br><span class="line">    step(<span class="string">&#x27;\n&#x27;</span>)</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">   <span class="keyword">case</span> <span class="string">&#x27;github&#x27;</span>:</span><br><span class="line">    <span class="keyword">await</span> runIfNotDry(<span class="string">&#x27;git&#x27;</span>, [<span class="string">&#x27;push&#x27;</span>, <span class="string">&#x27;github&#x27;</span>, <span class="string">`master`</span>])</span><br><span class="line">    step(<span class="string">&#x27;\n&#x27;</span>)</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">   <span class="keyword">default</span>:</span><br><span class="line">   <span class="keyword">break</span>;</span><br><span class="line">  &#125; </span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (isDryRun) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">`\nDry run finished - run git diff to see package changes.`</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line">main().catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.error(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果你要进行同时上传 github 和 gitee 的话，需要做一些配置，详情请点击链接查看<br><a target="_blank" rel="noopener" href="https://blog.csdn.net/aeoliancrazy/article/details/86541307">同步gitee和github</a></p>
</blockquote>
<h2 id="3-功能"><a href="#3-功能" class="headerlink" title="3. 功能"></a>3. 功能</h2><p>功能如下：</p>
<p>首先，我们点击调试，会问你是否发布到远端仓库（也就是 gitee 和 github ）</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109011534615.png" alt="点击调试自动发布"></p>
<p>是，就下一步，否，就退出</p>
<p>我们选了是之后，他会让你输入更新内容，默认的话就是当前时间加上更新二字</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109011536403.png" alt="输入更新内容"></p>
<p>在继续，我们可以看见他会问你选择那个仓库，默认就全部发送</p>
<p>如果有选择的话，就会发送到对应的仓库</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109011538998.jpg" alt="选择仓库"></p>
<p>摁下回车，开始提交并推送到对应的仓库</p>
<p><img src="https://cdn.jsdelivr.net/gh/Vixcity/FigureBed/img/202109011540960.jpg" alt="提交和推送"></p>
<p><font color=cyan size=7>完结撒花</font></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://vixcity.gitee.io/my-gitee-blog">Vixcity</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://vixcity.gitee.io/my-gitee-blog/2021/10/22/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91Vue-release%20%E5%B0%A4%E9%9B%A8%E6%BA%AA%E5%8F%91%E5%B8%83%20Vue.js%20%E7%9A%84%E6%B5%81%E7%A8%8B%E4%BB%A5%E5%8F%8A%E8%87%AA%E5%8A%A8%E5%8C%96%E5%8F%91%E5%B8%83%E5%8A%9F%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0/">http://vixcity.gitee.io/my-gitee-blog/2021/10/22/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91Vue-release%20%E5%B0%A4%E9%9B%A8%E6%BA%AA%E5%8F%91%E5%B8%83%20Vue.js%20%E7%9A%84%E6%B5%81%E7%A8%8B%E4%BB%A5%E5%8F%8A%E8%87%AA%E5%8A%A8%E5%8C%96%E5%8F%91%E5%B8%83%E5%8A%9F%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://vixcity.gitee.io/my-gitee-blog" target="_blank">Vixcity</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/my-gitee-blog/tags/%E6%BA%90%E7%A0%81/">源码</a><a class="post-meta__tags" href="/my-gitee-blog/tags/Vue/">Vue</a><a class="post-meta__tags" href="/my-gitee-blog/tags/Vue-release/">Vue-release</a></div><div class="post_share"><div class="social-share" data-image="/my-gitee-blog/img/vue%E7%9B%B8%E5%85%B3.jpg" data-sites="wechat,qq"></div><link rel="stylesheet" href="/my-gitee-blog/" media="print" onload="this.media='all'"><script src="/my-gitee-blog/" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/my-gitee-blog/2021/10/23/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91update-notifier%20%E6%9B%B4%E6%96%B0%20CLI%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E7%9A%84%E9%80%9A%E7%9F%A5-%E8%AF%A6%E8%A7%A3/"><img class="prev-cover" src="/my-gitee-blog/img/NodeJs.jpg" onerror="onerror=null;src='/my-gitee-blog/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">【源码阅读】update-notifier 更新 CLI 应用程序的通知-详解</div></div></a></div><div class="next-post pull-right"><a href="/my-gitee-blog/2021/10/20/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91koa%E6%B4%8B%E8%91%B1%E6%A8%A1%E5%9E%8B%E4%B8%8Ekoa-compose/"><img class="next-cover" src="/my-gitee-blog/img/NodeJs.jpg" onerror="onerror=null;src='/my-gitee-blog/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">【源码阅读】koa洋葱模型与koa-compose</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/my-gitee-blog/2021/09/14/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91%E6%89%8B%E6%91%B8%E6%89%8B%E6%95%99%E4%BD%A0%E8%B0%83%E8%AF%95%20vue-devtools%20%EF%BC%8C%E4%BD%A0%E7%A1%AE%E5%AE%9A%E4%B8%8D%E6%9D%A5%E7%9C%8B%E7%9C%8B%E5%98%9B/" title="【源码阅读】手摸手教你调试 vue-devtools ，你确定不来看看嘛"><img class="cover" src="/my-gitee-blog/img/vue%E7%9B%B8%E5%85%B3.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-14</div><div class="title">【源码阅读】手摸手教你调试 vue-devtools ，你确定不来看看嘛</div></div></a></div><div><a href="/my-gitee-blog/2021/10/20/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91koa%E6%B4%8B%E8%91%B1%E6%A8%A1%E5%9E%8B%E4%B8%8Ekoa-compose/" title="【源码阅读】koa洋葱模型与koa-compose"><img class="cover" src="/my-gitee-blog/img/NodeJs.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-20</div><div class="title">【源码阅读】koa洋葱模型与koa-compose</div></div></a></div><div><a href="/my-gitee-blog/2021/10/23/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91update-notifier%20%E6%9B%B4%E6%96%B0%20CLI%20%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E7%9A%84%E9%80%9A%E7%9F%A5-%E8%AF%A6%E8%A7%A3/" title="【源码阅读】update-notifier 更新 CLI 应用程序的通知-详解"><img class="cover" src="/my-gitee-blog/img/NodeJs.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-23</div><div class="title">【源码阅读】update-notifier 更新 CLI 应用程序的通知-详解</div></div></a></div><div><a href="/my-gitee-blog/2021/10/25/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91validate-npm-package-name%20%E9%AA%8C%E8%AF%81%E6%98%AF%E5%90%A6%E6%98%AF%E4%B8%AA%E6%9C%89%E6%95%88%E7%9A%84%20npm%20%E5%8C%85%E5%90%8D/" title="【源码阅读】validate-npm-package-name 验证是否是个有效的 npm 包名"><img class="cover" src="/my-gitee-blog/img/NodeJs.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-25</div><div class="title">【源码阅读】validate-npm-package-name 验证是否是个有效的 npm 包名</div></div></a></div><div><a href="/my-gitee-blog/2021/10/19/%E3%80%90%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E3%80%91co.js%20-%20%E8%AE%A9%E5%BC%82%E6%AD%A5%E7%9A%84%E4%BB%A3%E7%A0%81%E5%90%8C%E6%AD%A5%E5%8C%96/" title="【源码阅读】co.js - 让异步的代码同步化"><img class="cover" src="/my-gitee-blog/img/JS.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-19</div><div class="title">【源码阅读】co.js - 让异步的代码同步化</div></div></a></div><div><a href="/my-gitee-blog/2021/10/15/%E3%80%90NodeJS%E3%80%91Node.js%20+%20Vue%20%E5%AE%9E%E7%8E%B0%20Excel%20%E5%AF%BC%E5%87%BA%E4%B8%8E%E4%BF%9D%E5%AD%98/" title="【NodeJS】Node.js + Vue 实现 Excel 导出与保存"><img class="cover" src="/my-gitee-blog/img/NodeJs.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-15</div><div class="title">【NodeJS】Node.js + Vue 实现 Excel 导出与保存</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="lv-container" data-id="city" data-uid="MTAyMC81NDQ0NS8zMDkxNg=="></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/my-gitee-blog/img/avatar.png" onerror="this.onerror=null;this.src='/my-gitee-blog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Vixcity</div><div class="author-info__description">今日事，今日毕</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/my-gitee-blog/archives/"><div class="headline">文章</div><div class="length-num">55</div></a></div><div class="card-info-data-item is-center"><a href="/my-gitee-blog/tags/"><div class="headline">标签</div><div class="length-num">50</div></a></div><div class="card-info-data-item is-center"><a href="/my-gitee-blog/categories/"><div class="headline">分类</div><div class="length-num">18</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Vixcity"><i class="fab fa-github"></i><span>我的Github</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/Vixcity" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:2091283625@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是Vixcity目前的小博客</div></div><div class="sticky_layout"><div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden;"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%;"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/13/%E3%80%90NodeJS%E3%80%91NodeJS%20%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AF%B7%E6%B1%82/" title="【NodeJS】NodeJS 服务端请求"><img src="/my-gitee-blog/img/NodeJs.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【NodeJS】NodeJS 服务端请求"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/13/%E3%80%90NodeJS%E3%80%91NodeJS%20%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AF%B7%E6%B1%82/" title="【NodeJS】NodeJS 服务端请求">【NodeJS】NodeJS 服务端请求</a><time datetime="2022-07-12T16:00:00.000Z" title="发表于 2022-07-13 00:00:00">2022-07-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%201/" title="【Hexo】标签样式列表参考 - 1"><img src="/my-gitee-blog/img/hexo.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【Hexo】标签样式列表参考 - 1"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%201/" title="【Hexo】标签样式列表参考 - 1">【Hexo】标签样式列表参考 - 1</a><time datetime="2022-07-11T16:00:00.000Z" title="发表于 2022-07-12 00:00:00">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%202/" title="【Hexo】标签样式列表参考 - 2"><img src="/my-gitee-blog/img/hexo.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【Hexo】标签样式列表参考 - 2"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%202/" title="【Hexo】标签样式列表参考 - 2">【Hexo】标签样式列表参考 - 2</a><time datetime="2022-07-11T16:00:00.000Z" title="发表于 2022-07-12 00:00:00">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%203/" title="【Hexo】标签样式列表参考 - 3"><img src="/my-gitee-blog/img/hexo.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【Hexo】标签样式列表参考 - 3"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/12/%E3%80%90Hexo%E3%80%91%E6%A0%87%E7%AD%BE%E6%A0%B7%E5%BC%8F%E5%88%97%E8%A1%A8%E5%8F%82%E8%80%83%20-%203/" title="【Hexo】标签样式列表参考 - 3">【Hexo】标签样式列表参考 - 3</a><time datetime="2022-07-11T16:00:00.000Z" title="发表于 2022-07-12 00:00:00">2022-07-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-gitee-blog/2022/07/07/%E3%80%90NodeJS%E3%80%91NodeJS%E5%85%A5%E9%97%A8%E5%AD%A6%E4%B9%A0/" title="【NodeJS】NodeJS入门学习"><img src="/my-gitee-blog/img/NodeJs.jpg" onerror="this.onerror=null;this.src='/my-gitee-blog/img/404.jpg'" alt="【NodeJS】NodeJS入门学习"/></a><div class="content"><a class="title" href="/my-gitee-blog/2022/07/07/%E3%80%90NodeJS%E3%80%91NodeJS%E5%85%A5%E9%97%A8%E5%AD%A6%E4%B9%A0/" title="【NodeJS】NodeJS入门学习">【NodeJS】NodeJS入门学习</a><time datetime="2022-07-06T16:00:00.000Z" title="发表于 2022-07-07 00:00:00">2022-07-07</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/my-gitee-blog/img/vue%E7%9B%B8%E5%85%B3.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By Vixcity</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div id="running-time"></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/my-gitee-blog/js/utils.js"></script><script src="/my-gitee-blog/js/main.js"></script><script src="/my-gitee-blog/js/tw_cn.js"></script><script src="/my-gitee-blog/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function loadLivere () {
  if (typeof LivereTower === 'object') {
    window.LivereTower.init()
  }
  else {
    (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
    })(document, 'script');
  }
}

if ('Livere' === 'Livere' || !false) {
  if (false) btf.loadComment(document.getElementById('lv-container'), loadLivere)
  else loadLivere()
}
else {
  function loadOtherComment () {
    loadLivere()
  }
}</script></div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/my-gitee-blog/js/newStyle.js"></script><script src="/my-gitee-blog/js/sakura.js"></script><script>setInterval(()=>{let create_time=Math.round(new Date("2021-9-8-00:00:00").getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600}if(second>=3600){time[2]=parseInt(second/3600);second%=3600}if(second>=60){time[3]=parseInt(second/60);second%=60}if(second>0){time[4]=second}currentTimeHtml='小博客已经安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';var elementById=document.getElementById('running-time');if(elementById){elementById.innerHTML=currentTimeHtml}},1000);</script><script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script><script src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function electric_clock_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>';
                console.log('已挂载electric_clock')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='all'|| 'all' ==='all')){

            electric_clock_injector_config()
        } </script><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script data-pjax  src="https://cdn.jsdelivr.net/gh/Zfour/hexo-electric-clock@1.0.6/clock.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0.5s');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://unpkg.zhimg.com/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://unpkg.zhimg.com/hexo-butterfly-wowjs/lib/wow_init.js"></script><!-- hexo injector body_end end --><script src="/my-gitee-blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>